<script setup lang="ts">
import { useRouter } from "vue-router";
import { initUser } from "./helpers/init";
import { initSocket } from "./services/socket";

const router = useRouter();
router.replace("/");
init();
async function init() {
	try {
		await initUser().catch(() => {
			throw new Error();
		});
		initSocket();
	} catch (error) {
		router.replace("/login");
	}
}
</script>

<template>
	<RouterView v-slot="{ Component }">
		<Transition name="fade" mode="out-in">
			<KeepAlive>
				<Component :is="Component"></Component>
			</KeepAlive>
		</Transition>
	</RouterView>
</template>

<style lang="scss">
@use "./styles/reset";
@use "./styles/transition";
@use "./styles/themes";
@use "@/styles/mixins";
:root {
	accent-color: var(--primary-color);
	user-select: none;
}
html {
	font-size: 0.133333vw;
}
html,
body {
	height: 100%;
}
#app {
	height: 100%;
	display: flex;
	flex-direction: column;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: #0003;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
}
.svg-inline--hidden {
	display: none;
}
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
	overflow: hidden;
}
.placeholder {
	color: #808080 !important;
}
button.primary {
	color: #fff;
	background-color: var(--primary-color);
}
.red {
	color: #ff0000;
}
.black {
	color: #000000;
}
.card {
	flex-shrink: 0;
	position: relative;
	box-shadow: 0 0 3rem 1rem #414141;
	border-radius: 4rem;
	background-color: #d2771c;
	transition: box-shadow 0.2s;
	&.active {
		box-shadow: 0 0 12rem 6rem var(--primary-color);
	}
	&.hero-card {
		display: flex;
		width: 91.9rem;
		height: 105.6rem;
		&.tied {
			&::after {
				content: "死亡";
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 4rem;
				background: #ccc;
				z-index: 9;
				border-radius: 4rem;
				pointer-events: none;
				transform: rotate(20deg);
			}
		}
		&.dead {
			filter: grayscale(1);
			&::after {
				content: "死亡";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to right, transparent, #000000cc);
				color: #fff;
				font-size: 10rem;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 9;
				border-radius: 4rem;
				pointer-events: none;
			}
		}
		.number {
			position: absolute;
			bottom: -10rem;
			left: 50%;
			transform: translateX(-50%);
			font-size: 8rem;
			color: #9e590b;
			text-shadow: 0 0 1rem #fff;
		}
		.delay-cards {
			position: absolute;
			top: -16rem;
			left: 0;
			display: flex;
			width: 100%;
			overflow-x: auto;
			&::-webkit-scrollbar {
				display: none;
			}
			li {
				width: 14rem;
				height: 14rem;
				font-size: 8rem;
				color: #fff;
				background-color: #9e590b;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.message {
			position: absolute;
			top: 0;
			left: 0;
			padding: 4rem;
			max-width: 100%;
			color: #fff;
			font-size: 8rem;
			background-color: #000000cc;
			z-index: 10;
			box-shadow: 0 0 3rem 1rem #000000cc;
			border-radius: 2rem;
			word-break: break-all;
		}
		.title {
			width: 16rem;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			border-radius: 4rem 0 0 4rem;
			background-color: #333;
			&.wei {
				background-color: var(--wei-color);
				background: linear-gradient(to bottom, var(--darken-wei-color), #414141);
				i {
					color: var(--wei-color);
					text-shadow: 0 0 2rem #000;
				}
			}
			&.shu {
				background-color: var(--shu-color);
				background: linear-gradient(to bottom, var(--darken-shu-color), #414141);
				i {
					color: var(--shu-color);
					text-shadow: 0 0 2rem #000;
				}
			}
			&.wu {
				background-color: var(--wu-color);
				background: linear-gradient(to bottom, var(--darken-wu-color), #414141);
				i {
					color: var(--wu-color);
					text-shadow: 0 0 2rem #000;
				}
			}
			&.qun {
				background-color: var(--qun-color);
				background: linear-gradient(to bottom, var(--darken-qun-color), #414141);
				i {
					color: var(--qun-color);
					text-shadow: 0 0 2rem #000;
				}
			}
			&.ye {
				background-color: var(--ye-color);
				background: linear-gradient(to bottom, var(--darken-ye-color), #414141);
				i {
					color: var(--ye-color);
					text-shadow: 0 0 2rem #000;
				}
			}
			&.shen {
				background-color: var(--shen-color);
				background: linear-gradient(to bottom, var(--darken-shen-color), #414141);
				i {
					color: var(--shen-color);
					text-shadow: 0 0 2rem #000;
				}
			}
			i {
				font-size: 10rem;
				font-style: normal;
			}
			b {
				flex: 1;
				color: #eee;
				font-size: 10rem;
				font-weight: normal;
				text-align: center;
				overflow: auto;
				&::-webkit-scrollbar {
					display: none;
				}
			}
			p {
				margin-bottom: 4rem;
				position: relative;
				width: 24rem;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				z-index: 3;
				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 12rem;
				}
				span {
					position: relative;
					flex-shrink: 0;
					font-size: 8rem;
					text-shadow: 0 0 1rem #000;
					font-weight: bold;
					color: #fff;
				}
				&.blood-count {
					.icon {
						color: #cf0000;
					}
				}
				&.hand-card-count {
					.icon {
						color: #cfbd8b;
					}
				}
			}
		}
		.content {
			flex: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			overflow: hidden;
			.covers {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				border-radius: 0 4rem 4rem 0;
				overflow: hidden;
				&.flipped::after {
					content: "翻面";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.8);
					color: #fff;
					font-size: 10rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				picture {
					position: relative;
					flex: 1;
					width: 0;
					object-fit: cover;
					&.hidden::after {
						content: "暗置";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.8);
						color: #fff;
						font-size: 10rem;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					img {
						flex: 1;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
			.marks {
				position: relative;
				padding: 0 2rem;
				max-height: 14rem;
				display: flex;
				column-gap: 2rem;
				overflow-x: auto;
				&::-webkit-scrollbar {
					display: none;
				}
				mark {
					flex-shrink: 0;
					padding: 0 4rem;
					font-size: 8rem;
					text-align: center;
					line-height: 14rem;
					color: #ccc;
					background-color: #414141cc;
					border-radius: 2rem;
				}
			}
			.materiels {
				position: relative;
				padding: 2rem;
				max-height: 50rem;
				overflow: auto;
				row-gap: 2rem;
				display: flex;
				flex-direction: column;
				&::-webkit-scrollbar {
					display: none;
				}
				li {
					height: 12rem;
					padding: 0 2rem;
					background-color: #f5f0e5cc;
					display: flex;
					align-items: center;
					border-radius: 2rem;
					span {
						flex: 1;
						font-size: 8rem;
					}
					b {
						flex-shrink: 0;
						font-size: 8rem;
					}
				}
			}
		}
	}
	&.hand-card {
		position: relative;
		width: 63rem;
		height: 88rem;
		.suit {
			position: absolute;
			left: 0;
			top: 2rem;
			width: 18rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			span {
				font-size: 12rem;
				text-shadow: 0 0 1rem #fff;
				font-weight: bold;
				line-height: 12rem;
			}
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 4rem;
		}
	}
}
</style>
